// JobAlumnuInfo.js
import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image, Dimensions, StyleSheet } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
const SCREENW = Dimensions.get('window').width

export default class JobAlumnuInfo extends React.PureComponent {
  static propTypes = {
    data: PropTypes.array
  }

  static defaultProps = {
    data: [
      'https://img2.woyaogexing.com/2019/05/25/eb9e1df941b747bc87899cfd770ce911!400x400.jpeg',
      'https://img2.woyaogexing.com/2019/05/25/e139aa24796e4b829c5131f7c6ffeb3b!400x400.jpeg',
      'https://img2.woyaogexing.com/2019/05/25/0d4ca25072834f32972e77f30fb5743a!400x400.jpeg',
      'https://img2.woyaogexing.com/2019/05/25/32bf0bef5d36483799e886bba057f865!400x400.jpeg',
      'https://img2.woyaogexing.com/2019/05/25/a50e80c1e14e44f5a3ac4fa0131491c8!400x400.jpeg',
      'https://img2.woyaogexing.com/2019/05/25/2bae16ad24c446c9bb15a28afb8c4760!400x400.jpeg',
      'https://img2.woyaogexing.com/2019/05/25/b8daad74b79a43b581352fb53f8f3e0d!400x400.jpeg'
    ]
  }

  render () {
    const { data } = this.props
    return (
      <View style={styles.container} >
        <View style={styles.imgBg}>
          {
            data.map(e => (
              <Image key={e} source={{ uri: e }} style={styles.img}/>
            ))
          }
        </View>
        <View style={styles.right}>
          <Text style={styles.txt}>{data.length}个校友已报名</Text>
          <Image source={require('@/imgC/home/triangle.png')} style={styles.triangle}/>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: ScaleS(25),
    marginHorizontal: ScaleS(20),
    paddingLeft: ScaleS(14),
    paddingRight: ScaleS(17),
    width: SCREENW - ScaleS(40),
    height: ScaleS(52),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    shadowColor: '#E3E5EA',
    shadowOffset: { width: 0, height: ScaleS(2) },
    shadowOpacity: 0.5,
    shadowRadius: ScaleS(59)
  },
  imgBg: {
    flexDirection: 'row-reverse',
    alignItems: 'center'
  },
  img: {
    marginRight: ScaleS(-11),
    width: ScaleS(29),
    height: ScaleS(29),
    borderRadius: ScaleS(14.5),
    resizeMode: 'cover'
  },
  right: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  txt: {
    marginRight: ScaleS(8),
    fontSize: ScaleT(12),
    fontWeight: 'bold',
    color: '#B4B6BA',
    height: ScaleS(14),
    lineHeight: ScaleS(14)
  },
  triangle: {
    width: ScaleS(7),
    height: ScaleS(5),
    transform: [{ rotate: '-90deg' }]
  }
})
